<template>
	<view class="">
		<view class="scroll_header"></view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="top_bg" v-for="(item,index) in items" :key="index" v-else>
				<view class="top-width">
					<view class="top_tit" v-if="item.get_order.order_sn">订单号：{{item.get_order.order_sn}}</view>
					<view class="" v-else>
						<view class="top_tit" v-if="item.apply_sn">{{item.apply_sn}}</view>
						<view class="top_tit" v-else>N/A</view>
					</view>
					<view class="time_data">{{item.add_time | formatDate}}</view>
					<view class="price">
						<view class="">
							<view class="num_price" v-if="item.log_type == 4">-{{item.amount}}</view>
							<view class="num_price_jia" v-else>+{{item.amount}}</view>
						</view>
						<view class="yue">余额：{{item.yue}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				items: [],
				more: 1, // 第几页
				count: 10, // 条数
				scrollHeight: 0, // 自适应高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		onReady() {
			// 获取屏幕尺寸的方法 start
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
			// 获取屏幕尺寸的方法 end
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 上拉加载函数
			scrolltolower(e) {
				console.log("eeeeeeeeeee", e);
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.items.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getData()
				}, 1000)
			},
			getData() {
				this.$H.post('v2/store/user/Account', {
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.u_loadmore = false
						this.items = res.data
					}
					console.log("获取账户明细列表", res);
				})
			},
		}
	}
</script>

<style>
	.time_data {
		font-size: 28rpx;
		color: #999;
		margin: 10rpx 0 10rpx 0;
	}

	.top_tit {
		font-size: 28rpx;
		color: #000;
	}

	.yue {
		font-size: 26rpx;
		color: #000;
	}

	.num_price {
		font-size: 28rpx;
		color: #f68636;
	}

	.num_price_jia {
		font-size: 28rpx;
		color: #333;
	}

	.price {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-width {
		width: 690rpx;
		margin: auto;
		padding: 20rpx 0 20rpx 0;
	}

	.top_bg {
		width: 750rpx;
		margin-bottom: 10rpx;
		background: #fff;
	}
</style>